<template>
  <div class="about">
    <section class="banner">
      <img src="@/assets/banner/home_pic_yj.png">
    </section>
    <section class="about-us">
      <div class="title">
        <div class="title-cn">我们是谁</div>
        <div class="title-en">About Us</div>
        <div class="title-line"></div>
      </div>
      <img src="@/assets/banner/home_pic_banner.png" class="about-img">
      <Row class="about-content">
        <Col span="8" class="about-content-company">
          <div class="about-content-company-cn">
            上海欧点信息科技有限公司
          </div>
          <div class="about-content-company-en">
            Shanghai Oudot Information Technology Co.,Ltd
          </div>
        </Col>
        <Col span="16" class="about-content-desc">
          <div class="about-content-desc-text">
            上海欧点信息技术有限公司是一家以软件开发、物联网集成、微信开发及代运营为核心的高新技术企业
          </div>
          <div class="about-content-desc-text">
            我们以技术研发创新为主导，针对客户的差异化需求，利用核心技术为客户提供安全、稳定、高效的定制化解决方案。同时，在每一个项目背后我们会有一支有10年以上相关经验的技术和管理团队为之保驾护航，他们对物联网领 域有着深厚了解，在多变的商业环境中有独到的前瞻性
          </div>
          <div class="about-content-desc-text">
            在多年的经营实践中，我们一直秉持着“诚信、创新、坚持、共赢”的经营理念，通过自主创新和真诚合作已经与中国移动、中国电信、中国建设银行等百余家企事业单位建立深度合作，合作范围遍布于医疗、移动通信、教育、电商等十余个重要行业。在未来，我们会继续这一领域深耕，不断探索物联网行业和商业应用的无限可能，与投资人、合作伙伴、员工共同成长，互惠互利，共赢未来
          </div>
        </Col>
      </Row>
    </section>

    <Row class="business">
      <Col span="4" class="business-title">
        <div class="business-title-cn">经营理念</div>
        <div class="business-title-en">Business Concepts</div>
        <div class="business-title-line"></div>
      </Col>
      <Col span="5" class="business-card">
        <img src="@/assets/banner/home_pic_yj.png" class="business-card-img">
        <div class="business-card-content">
          <div class="business-card-title">诚信</div>
          <div class="business-card-desc">
            <span>不信不立，不诚不行。我们竭诚为每一位 客户提供最满意产品与服务</span>
            <div class="business-card-desc-icon">/</div>
          </div>
        </div>
      </Col>
      <Col span="5" class="business-card">
        <img src="@/assets/banner/home_pic_yj.png" class="business-card-img">
        <div class="business-card-content">
          <div class="business-card-title">创新</div>
          <div class="business-card-desc">
            <span>不信不立，不诚不行。我们竭诚为每一位 客户提供最满意产品与服务</span>
            <div class="business-card-desc-icon">/</div>
          </div>
        </div>
      </Col>
      <Col span="5" class="business-card">
        <img src="@/assets/banner/home_pic_yj.png" class="business-card-img">
        <div class="business-card-content">
          <div class="business-card-title">坚持</div>
          <div class="business-card-desc">
            <span>不信不立，不诚不行。我们竭诚为每一位 客户提供最满意产品与服务</span>
            <div class="business-card-desc-icon">/</div>
          </div>
        </div>
      </Col>
      <Col span="5" class="business-card">
        <img src="@/assets/banner/home_pic_yj.png" class="business-card-img">
        <div class="business-card-content">
          <div class="business-card-title">共赢</div>
          <div class="business-card-desc">
            <span>不信不立，不诚不行。我们竭诚为每一位 客户提供最满意产品与服务</span>
            <div class="business-card-desc-icon">/</div>
          </div>
        </div>
      </Col>
    </Row>

    <section class="history">
      <div class="title">
        <div class="title-cn">发展历程</div>
        <div class="title-en">Our History</div>
        <div class="title-line"></div>
      </div>
      <div class="history-container">

        <div class="history-item bottom">
          <div class="history-item-date">
            2008
          </div>
          <div class="history-item-content">
            <div class="history-item-content-icon">
              <div class="history-item-content-icon-line"></div>
              <span class="history-item-content-icon-dot">
                <span></span>
              </span>
            </div>
            <div class="history-item-content-text">
              公司成立
            </div>
          </div>
        </div>
        <span class="history-arrow">////</span>
        <div class="history-item top">
          <div class="history-item-date">
            2011
          </div>
          <div class="history-item-content">
            <div class="history-item-content-text">
              ICT业务/成为三网优秀合作伙伴/ 涉足ERP平台开发
            </div>
            <div class="history-item-content-icon">
              <span class="history-item-content-icon-dot">
                <span></span>
              </span>
              <div class="history-item-content-icon-line"></div>
            </div>
          </div>
        </div>
        <span class="history-arrow">////</span>
        <div class="history-item bottom">
          <div class="history-item-date">
            2013
          </div>
          <div class="history-item-content">
            <div class="history-item-content-icon">
              <div class="history-item-content-icon-line"></div>
              <span class="history-item-content-icon-dot">
                <span></span>
              </span>
            </div>
            <div class="history-item-content-text">
              各类电商平台开发/新媒体开发及运营/ APP开发及运营
            </div>
          </div>
        </div>
        <span class="history-arrow">////</span>
        <div class="history-item top">
          <div class="history-item-date">
            2015
          </div>
          <div class="history-item-content">
            <div class="history-item-content-text">
              涉及金融教育、医疗类开发/ 物联网相关软件开发/物联网+
            </div>
            <div class="history-item-content-icon">
              <span class="history-item-content-icon-dot">
                <span></span>
              </span>
              <div class="history-item-content-icon-line"></div>
            </div>
          </div>
        </div>
        <span class="history-arrow">////</span>
        <div class="history-item bottom">
          <div class="history-item-date">
            2016
          </div>
          <div class="history-item-content">
            <div class="history-item-content-icon">
              <div class="history-item-content-icon-line"></div>
              <span class="history-item-content-icon-dot">
                <span></span>
              </span>
            </div>
            <div class="history-item-content-text">
              业务细分， 上海欧点信息技术有限公司成立
            </div>
          </div>
        </div>
        <span class="history-arrow">////</span>
        <div class="history-item top">
          <div class="history-item-date">
            2017
          </div>
          <div class="history-item-content">
            <div class="history-item-content-text">
              物联网一体化解决方案/ 数据采集/人工智能
            </div>
            <div class="history-item-content-icon">
              <span class="history-item-content-icon-dot">
                <span></span>
              </span>
              <div class="history-item-content-icon-line"></div>
            </div>
          </div>
        </div>
        <span class="history-arrow">////</span>
        <div class="history-item bottom">
          <div class="history-item-date">
            2019
            <span class="plus">+</span>
          </div>
          <div class="history-item-content">
            <div class="history-item-content-icon">
              <div class="history-item-content-icon-line"></div>
              <span class="history-item-content-icon-dot">
                <span></span>
              </span>
            </div>
            <div class="history-item-content-text">
              系统集成/大数据挖掘/ 机器自主学习
            </div>
          </div>
        </div>

      </div>
    </section>

    <section class="case">
      <div class="case-container">
        <div class="case-item">
          <div class="case-num">
            21
            <span class="case-num-plus">+</span>
          </div>
          <div class="case-desc">覆盖行业</div>
        </div>
        <div class="case-line"></div>
        <div class="case-item">
          <div class="case-num">
            212
            <span class="case-num-plus">+</span>
          </div>
          <div class="case-desc">一体化解决方案</div>
        </div>
        <div class="case-line"></div>
        <div class="case-item">
          <div class="case-num">
            101
            <span class="case-num-plus">+</span>
          </div>
          <div class="case-desc">合作伙伴</div>
        </div>
        <div class="case-line"></div>
        <div class="case-item">
          <div class="case-num">
            136
            <span class="case-num-plus">+</span>
          </div>
          <div class="case-desc">成功案例</div>
        </div>
      </div>
    </section>

    <section class="aptitude cooperative">
      <div class="title" style="margin: 0;">
        <div class="title-cn">
          我们的资质
          <img src="@/assets/home_btn_into.png" class="partner-arrow" @click="jumpTo('/company-qualification')">
        </div>
        <div class="title-en">Our Aptitude</div>
        <div class="title-line"></div>
      </div>
      <div class="cooperative-banner">
        <Carousel arrow="always" trigger="click" :dots="'none'">
          <CarouselItem class="cooperative-banner-item">
            <Row class="aptitude-item">
              <Col span="8" class="aptitude-item-page">
                <img src="" class="aptitude-item-page-img">
                <span class="aptitude-item-page-desc">ISO270001证书</span>
              </Col>
              <Col span="8" class="aptitude-item-page">
                <img src="" class="aptitude-item-page-img">
                <span class="aptitude-item-page-desc">ISO9001证书</span>
              </Col>
              <Col span="8" class="aptitude-item-page">
                <img src="" class="aptitude-item-page-img">
                <span class="aptitude-item-page-desc">质量管理体系证书</span>
              </Col>
            </Row>
          </CarouselItem>
          <CarouselItem class="cooperative-banner-item">
            <Row class="aptitude-item">
              <Col span="8" class="aptitude-item-page">
                <img src="" class="aptitude-item-page-img">
                <span class="aptitude-item-page-desc">ISO270001证书</span>
              </Col>
              <Col span="8" class="aptitude-item-page">
                <img src="" class="aptitude-item-page-img">
                <span class="aptitude-item-page-desc">ISO9001证书</span>
              </Col>
              <Col span="8" class="aptitude-item-page">
                <img src="" class="aptitude-item-page-img">
                <span class="aptitude-item-page-desc">质量管理体系证书</span>
              </Col>
            </Row>
          </CarouselItem>
        </Carousel>
      </div>
    </section>

    <section class="partner cooperative">
      <div class="title">
        <div class="title-cn">
          合作伙伴
          <img src="@/assets/home_btn_into.png" class="partner-arrow" @click="jumpTo('/cooperative-partner')">
        </div>
        <div class="title-en">Our Partner</div>
        <div class="title-line"></div>
      </div>
      <div class="cooperative-banner">
        <Carousel :autoplay="false" arrow="always" :dots="'none'">
          <CarouselItem class="cooperative-banner-item">
            <img src="@/assets/home_logo_zgyd.png">
            <img src="@/assets/home_logo_zglt.png">
            <img src="@/assets/home_logo_zgdx.png">
            <img src="@/assets/home_logo_pfyh.png">
            <img src="@/assets/home_logo_jsyh.png">
            <img src="@/assets/home_logo_shdq.png">
          </CarouselItem>
          <CarouselItem class="cooperative-banner-item">
            <img src="@/assets/home_logo_zgyd.png">
            <img src="@/assets/home_logo_zglt.png">
            <img src="@/assets/home_logo_zgdx.png">
            <img src="@/assets/home_logo_pfyh.png">
            <img src="@/assets/home_logo_jsyh.png">
            <img src="@/assets/home_logo_shdq.png">
          </CarouselItem>
        </Carousel>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  mounted() {
  },
  methods: {
    jumpTo(url) {
      this.$router.push(url)
    },
  }
}
</script>

<style scoped>
.banner {
  width: 100%;
  max-height: 360px;
  overflow: hidden;
}
.banner img {
  width: 100%;
}
.about-us {
  width: 1200px;
  margin: 0 auto;
}
.title {
  width: 100%;
  padding: 100px 0 0 0;
  text-align: center;
}
.title .title-cn {
  position: relative;
  width: 1200px;
  font-size: 30px;
  color: rgba(51,51,51,1);
  line-height: 42px;
  margin: 0 auto;
}
.title .title-en {
  font-size: 14px;
  color: rgba(103,103,103,1);
  line-height: 20px;
  margin-top: 12px;
}
.title .title-line {
  margin: 24px auto;
  width: 1px;
  height: 32px;
  background: rgba(230,230,230,1);
}
.partner-arrow {
  position: absolute;
  right: 0;
  top: 16px;
  width: 40px;
  cursor: pointer;
}
.about-img {
  width: 100%;
  max-height: 440px;
}
.about-content {
  margin: 40px 0 200px 0;
}
.about-content-company {
  
}
.about-content-company-cn {
  font-size: 16px;
  color: rgba(51,51,51,1);
  line-height: 22px;
  margin-bottom: 4px;
}
.about-content-company-en {
  font-size: 14px;
  color: rgba(153,153,153,1);
  line-height: 20px;
}
.about-content-desc {
  
}
.about-content-desc-text {
  font-size: 14px;
  color: rgba(102,102,102,1);
  line-height: 20px;
  padding: 0 0 40px 0;
  margin: 0 0 40px 0;
  border-bottom: 1px solid rgba(230,230,230,1);
}
.about-content-desc-text:last-of-type {
  margin: 0;
}
.business {
  width: 100%;
  height: 640px;
}
.business-title {
  position: relative;
  height: 640px;
  text-align: center;
  background: rgba(33,39,52,1);
  padding: 40px 0;
}
.business-title-cn {
  font-size: 30px;
  color: rgba(255,255,255,1);
  line-height: 42px;
  margin-bottom: 12px;
}
.business-title-en {
  font-size: 14px;
  color: rgba(255,255,255,1);
  line-height: 20px;
}
.business-title-line {
  position: absolute;
  bottom: 40px;
  left: 50%;
  width: 1px;
  height: 240px;
  background: rgba(255,255,255,0.2);
}
.business-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 640px;
}
.business-card-content {
  position: absolute;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 640px;
  border: 8px solid transparent;
  transition: 0.5s;
}
.business-card-img {
  max-height: 640px;
}
.business-card-title {
  position: absolute;
  bottom: 38px;
  font-size: 30px;
  color: rgba(255,255,255,1);
  line-height: 42px;
  transition: 0.5s;
}
.business-card-desc {
  position: absolute;
  bottom: -999px;
  font-size: 14px;
  color: rgba(255,255,255,1);
  line-height: 20px;
  height: 50px;
  padding: 102px 70px;
  text-align: center;
  background-color: #0088DE;
  transition: 0.5s;

}
.business-card-desc span {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.business-card-desc-icon {
  position: absolute;
  bottom: 49px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  opacity: 0.4;
  margin-top: 37px;
}
.business-card:hover .business-card-content {
  border-color: #0088DE;
}
.business-card:hover .business-card-title {
  bottom: 281px;
}
.business-card:hover .business-card-desc {
  bottom: 0;
}
.history {
  width: 100%;
  padding-bottom: 78px;
  background: url('../assets/banner/home_pic_lc.png') center center no-repeat;
}
.history-container {
  position: relative;
  width: 1200px;
  padding: 217px 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.history-item {
  position: relative;
  display: inline-block;
}
.history-item-date {
  font-size: 48px;
  font-weight: bold;
  color: rgba(51,51,51,1);
  line-height: 56px;
}
.history-item-date .plus {
  position: absolute;
  right: -15px;
  top: -25px;
  font-size: 20px;
  font-weight: bold;
  color: rgba(0,0,0,1);
}
.history-item-content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.history-item.bottom .history-item-content {
  margin-top: 20px;
}
.history-item.top .history-item-content {
  bottom: 56px;
  margin-bottom: 20px;
}
.history-item-content-icon {
  display: inline-block;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.history-item.bottom .history-item-content-icon {
  margin-bottom: 12px;
}
.history-item.top .history-item-content-icon {
  margin-top: 12px;
}
.history-item-content-icon-line {
  width: 1px;
  height: 97px;
  background: rgba(51,51,51,1);
}
.history-item-content-icon-dot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(51,51,51,1);
  border-radius: 50%;
}
.history-item-content-icon-dot span {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: rgba(51,51,51,1);
  border-radius: 50%;
}
.history-item-content-text {
  width: 140px;
  text-align: center;
  font-size: 14px;
  color: rgba(102,102,102,1);
  line-height: 20px;
}
.history-arrow {
  font-size: 14px;
  margin: 0 23px;
  line-height: 56px;
  color: rgba(51,51,51,1);
  font-weight: bold;
}
.case {
  width: 100%;
  height: 94px;
  background: rgba(33,39,52,1);
  padding: 73px 0;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.case-container {
  display: inline-block;
  width: 1200px;
  display: flex;
  align-items: center;
}
.case-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.case-num {
  position: relative;
  font-size: 54px;
  color: rgba(255,255,255,1);
  line-height: 75px;
}
.case-num-plus {
  position: absolute;
  right: -15px;
  top: 0;
  font-size: 20px;
  color: rgba(0,0,0,1);
  font-size: 18px;
  color: rgba(255,255,255,1);
  line-height: 25px;
}
.case-desc {
  font-size: 14px;
  color: rgba(255,255,255,1);
  line-height: 20px;
}
.case-line {
  width: 1px;
  height: 36px;
  margin: 0 123px;
  background: rgba(230,230,230,1);
}
.aptitude {
  width: 100%;
  background-color: #F5F5F5;
  padding: 100px 0;
}
.aptitude-item {
  width: 100%;
}
.aptitude-item-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.aptitude-item-page-img {
  width: 330px;
  height: 480px;
  background-color: #fff;
  box-shadow: 0px 12px 24px 0px rgba(0,0,0,0.08);
}
.aptitude-item-page-desc {
  font-size: 16px;
  color: rgba(51,51,51,1);
  line-height: 22px;
  margin-top: 60px;
}
.partner {
  padding-bottom: 205px;
  background-color: #fff;
}
.cooperative-banner {
  width: 1300px;
  margin: 34px auto;
}
.cooperative-banner-item {
  width: 1220px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 40px;
}
.cooperative-banner-item > img {
  width: 170px;
  margin: 0 40px 0 0;
}
.cooperative-banner-item > img:last-of-type {
  margin-right: 0;
}
</style>
